<script setup>
import { User, Lock, Key } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { useTokenStore } from '@/stores/token.js'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userLoginService } from '@/api/user.js'

const router = useRouter()
const tokenStore = useTokenStore()

const LoginData = ref({
    username: '',
    password: '',
    type: ''
})

// 定义下拉框
const options = ref([
    {
        value: 'admin',
        label: '管理员'
    },
    {
        value: 'employee',
        label: '普通员工'
    }
])

// 动态展示下拉框提示信息
const message = ref('请选择角色')
const value = ref('')

const roleChange = (value) => {
    if (value === 'admin') {
        message.value = '管理员'
    } else {
        message.value = '普通员工'
    }
}

//定义校验规则
const rules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
    ]
})

const form = ref()
const loading = ref(false)

const Login = async () => {
    // 校验表单
    try {
        await form.value.validate()
    } catch (error) {
        return
    }
    
    loading.value = true
    
    try {
        LoginData.value.type = message.value
        const res = await userLoginService(LoginData.value)
        tokenStore.setToken(res.data)
        
        // 判断是否是管理员，如果是管理员，跳转到管理员页面，如果不是，跳转到普通员工页面
        if (message.value) {
            ElMessage({
                message: '登录成功',
                type: 'success'
            })
            router.push('/admin')
        } else {
            ElMessage({
                message: '请选择角色',
                type: 'error'
            })
        }
    } catch (error) {
        console.error(error)
    } finally {
        loading.value = false
    }
}

// 添加动画效果
const formVisible = ref(false)
onMounted(() => {
    setTimeout(() => {
        formVisible.value = true
    }, 300)
})
</script>

<template>
    <div class="login-container">
        <div class="login-background"></div>
        <div class="login-content">
            <div class="login-left">
                <div class="brand-container">
                    <h1 class="brand-title">超市库存管理系统</h1>
                    <p class="brand-subtitle">高效 · 智能 · 便捷</p>
                    <div class="brand-features">
                        <div class="feature-item">
                            <el-icon><Key /></el-icon>
                            <span>安全可靠</span>
                        </div>
                        <div class="feature-item">
                            <el-icon><User /></el-icon>
                            <span>用户友好</span>
                        </div>
                        <div class="feature-item">
                            <el-icon><Lock /></el-icon>
                            <span>数据保障</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="login-right">
                <div class="form-container" :class="{ 'visible': formVisible }">
                    <el-form 
                        ref="form" 
                        size="large" 
                        autocomplete="off" 
                        :model="LoginData" 
                        :rules="rules"
                        class="login-form"
                    >
                        <div class="form-header">
                            <h2>欢迎登录</h2>
                            <p>请输入您的账号信息</p>
                        </div>
                        
                        <el-form-item prop="username">
                            <el-input 
                                :prefix-icon="User" 
                                placeholder="请输入用户名" 
                                v-model="LoginData.username"
                                class="custom-input"
                            ></el-input>
                        </el-form-item>
                        
                        <el-form-item prop="password">
                            <el-input 
                                name="password" 
                                :prefix-icon="Lock" 
                                type="password" 
                                placeholder="请输入密码"
                                v-model="LoginData.password"
                                class="custom-input"
                            ></el-input>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-select 
                                v-model="value" 
                                class="custom-select" 
                                :placeholder="message" 
                                size="large" 
                                @change="roleChange"
                            >
                                <el-option 
                                    v-for="item in options" 
                                    :key="item.value" 
                                    :label="item.label" 
                                    :value="item.value" 
                                />
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item class="remember-forgot">
                            <div class="flex">
                                <el-checkbox>记住我</el-checkbox>
                                <el-link type="primary" :underline="false">忘记密码？</el-link>
                            </div>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button 
                                class="login-button" 
                                type="primary" 
                                :loading="loading"
                                @click="Login"
                            >
                                登录系统
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login-container {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
}

.login-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1976d2 0%, #2196f3 50%, #42a5f5 100%);
    clip-path: polygon(0 0, 65% 0, 45% 100%, 0 100%);
    z-index: 1;
}

.login-content {
    display: flex;
    width: 80%;
    max-width: 1200px;
    height: 80%;
    max-height: 700px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 2;
    position: relative;
}

.login-left {
    width: 50%;
    background: url('@/assets/login_bg.jpg') no-repeat center / cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(33, 150, 243, 0.7);
    }
}

.brand-container {
    position: relative;
    z-index: 3;
    color: white;
    text-align: center;
    padding: 0 40px;
    
    .brand-title {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 16px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .brand-subtitle {
        font-size: 18px;
        margin-bottom: 40px;
        letter-spacing: 2px;
    }
    
    .brand-features {
        display: flex;
        justify-content: space-around;
        margin-top: 60px;
        
        .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            
            .el-icon {
                font-size: 32px;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 50%;
                padding: 12px;
                transition: all 0.3s;
                
                &:hover {
                    transform: translateY(-5px);
                    background: rgba(255, 255, 255, 0.3);
                }
            }
            
            span {
                font-size: 16px;
            }
        }
    }
}

.login-right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.form-container {
    width: 100%;
    max-width: 400px;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease;
    
    &.visible {
        opacity: 1;
        transform: translateX(0);
    }
}

.login-form {
    width: 100%;
    
    .form-header {
        text-align: center;
        margin-bottom: 40px;
        
        h2 {
            font-size: 28px;
            color: #303133;
            margin-bottom: 8px;
        }
        
        p {
            color: #909399;
            font-size: 14px;
        }
    }
    
    .custom-input {
        :deep(.el-input__wrapper) {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            border-radius: 8px;
            padding: 0 15px;
            transition: all 0.3s;
            
            &:hover, &.is-focus {
                box-shadow: 0 0 0 1px #409eff inset;
            }
        }
        
        :deep(.el-input__prefix) {
            color: #909399;
        }
    }
    
    .custom-select {
        width: 100%;
        
        :deep(.el-input__wrapper) {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
            border-radius: 8px;
            transition: all 0.3s;
            
            &:hover, &.is-focus {
                box-shadow: 0 0 0 1px #409eff inset;
            }
        }
    }
    
    .remember-forgot {
        margin-bottom: 30px;
        
        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }
    
    .login-button {
        width: 100%;
        height: 50px;
        border-radius: 8px;
        font-size: 16px;
        letter-spacing: 1px;
        background: linear-gradient(to right, #1976d2, #42a5f5);
        border: none;
        transition: all 0.3s;
        
        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
        }
        
        &:active {
            transform: translateY(0);
        }
    }
}

@media (max-width: 992px) {
    .login-content {
        width: 90%;
        flex-direction: column;
        height: auto;
    }
    
    .login-left, .login-right {
        width: 100%;
    }
    
    .login-left {
        height: 200px;
    }
    
    .brand-container {
        .brand-title {
            font-size: 28px;
        }
        
        .brand-subtitle {
            font-size: 16px;
            margin-bottom: 20px;
        }
        
        .brand-features {
            display: none;
        }
    }
    
    .login-background {
        clip-path: polygon(0 0, 100% 0, 100% 30%, 0 50%);
    }
}
</style>